<template>
  <!-- 应答明细信息查看原交易页面弹出框-->
  <el-dialog
    title="小额明细对账应答信息-查看原交易列表"
    center
    :visible.sync="open"
    width="1024px"
    :close-on-click-modal="false"
    v-else="open"
    @close="closeFn"
  >
    <div class="discountReceipt-pick-operate-box">
      <div class="operate-box-bottom">
        <div class="bottom-content">
      <ht-table
        ref="dataTableDetail"
        :showSerialNumber="false"
        :multi-select="false"
        :dictMap="dictMap"
        :reqConfig="reqConfig"
        :queryParams="queryParams"
        :tableBindColumns="tableBindColumns"
        :initData="false"
      >
        <template v-slot:operate>
          <el-table-column label="操作" align="center" width="120" fixed="right" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <ht-button-group
                :buttonList="[
                {
                  label: '明细',
                  // permission: 'user:xxx:xxx',
                  doFunc: () => {
                    handleAction('details', scope.row);
                  },
                }
              ]"
              />
            </template>
          </el-table-column>
        </template>
      </ht-table>
    </div>
    </div>
    </div>
    <beps-detail-view ref="bepsDetailViewDialog" :formData="detailData" :dictMap="dictMap"></beps-detail-view>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  bepsOriDetailQuery,
  queryOriTxnDetail,
} from "@/api/cnaps/bizMng/dayEndProcess";
import BepsDetailView from "@/views/cnaps/bizMng/dayEndProcess/components/bepsDetailView";
export default {
  name: "BepsView",
  components: { BepsDetailView },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      isLoading: false,
      rules: {},
      entryTable:"BepsView",
      reqConfig:bepsOriDetailQuery,
      queryParams: {
      },
      detailData: {},
      formOptions: [],
      tableBindColumns: [
        { prop: 'id',   label: '交易流水号',width:180},
        { prop: 'workdate',   label: '工作日期', type:"date"},
        { prop: 'pkgType',   label: '报文类型', dictCode:"PKG_TYPE_BEPS_RECON",width:180},
        { prop: 'drct',   label: '来往账标志', dictCode:"DRCTCODE",width:180},
        { prop: 'bizType',   label: '业务类型', dictCode:"BIZ_TYPECODE"},
        { prop: 'sender',   label: '发起行行号',width:180},
        { prop: 'rcver',   label: '接收行行号',width:180},
        { prop: 'payerName',   label: '付款人名称',width:180},
        { prop: 'payeeName',   label: '收款人名称',width:180},
        { prop: 'procStatus',   label: '中心状态', dictCode:"PROCESSSTATUS"},
        { prop: 'amount',   label: '交易金额',type:"price"}
      ],

    };
  },
  watch: {
    open(val) {
      if (val) {
      }
    },
  },
  mounted() {

  },
  methods: {
    handleClose() {
      this.open = false;
    },
    // 表单重置
    reset() {
      this.resetForm("detailsForm");
      // this.$set(this, "form", {});
    },
    closeFn() {
      this.open = false;
      this.reset();
    },
    show(id) {
      this.open = true;
      this.$set(this.queryParams, "id", id);
      this.$nextTick(() => {
        this.$refs.dataTableDetail.doQuery(true);
      });
    },

    handleAction(type, row = {}) {
      switch (type) {
        case "details":
          // 明细
          queryOriTxnDetail({ id: row.id }).then((res) => {
            console.log(res.result, "明细详情");
            this.detailData = _.clone(res.result);
            this.$refs.bepsDetailViewDialog.show();
          });
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
